<template>
  <div>
    <bw-form ref="form" :mode="editForm" :rule="editRule">
      <bw-form-item label="姓名">
        <bw-input
          v-model="editForm.name"
          placeholder="联系人姓名"
        />
      </bw-form-item>
      <bw-form-item label="手机号">
        <bw-input
          v-model="editForm.phone"
          placeholder="请输入联系人手机号"
          type="phone"
        />
      </bw-form-item>
      <bw-form-item label="位置">
        <input
          v-model="editForm.location.name"
          class="select-location"
          placeholder="请选择位置"
          readonly
          @click="gotoMap"
        />
      </bw-form-item>
      <bw-form-item label="详细地址">
        <bw-input
          v-model="editForm.address"
          placeholder="请输入详细地址"
        />
      </bw-form-item>
    </bw-form>
    <bw-button
      type="primary"
      class="submit-btn"
      @click="submit"
    >
      提交
    </bw-button>
  </div>
</template>

<script>
import storage from '@/utils/storage'

export default {
  name: 'EditAddress',
  data () {
    return {
      submitFlg: false,
      editForm: {
        name: '',
        phone: '',
        location: {},
        address: ''
      },
      editRule: {}
    }
  },
  created () {
    if (!this.editForm.name) {
      this.initData()
    }
  },
  activated () {
    const location = storage.getItem('selectLocation')
    if (location) {
      this.editForm.location = location
    }
    if (!this.editForm.name) {
      this.initData()
    }
  },
  // 组件级的导航守卫
  beforeRouteLeave (to, from, next) {
    // const values = Object.values(this.editForm)
    if (to.path !== '/map' && !this.submitFlg) {
      if (confirm('确定放弃本次修改?')) {
        this.editForm = {
          name: '',
          phone: '',
          location: {},
          address: ''
        }
        this.$nextTick(() => {
          storage.removeItem('selectLocation')
          next()
        })
      }
    } else {
      next()
    }
  },
  methods: {
    async initData () {
      const res = await this.$api.address.get(this.$route.query.id)
      this.editForm = res.data
    },
    gotoMap () {
      this.$router.push('/map')
    },
    submit () {
      if (this.$route.query.id) {
        this.$api.address.update(this.$route.query.id, this.editForm).then(() => {
          this.submitFlg = true
          this.editForm = {
            name: '',
            phone: '',
            location: {},
            address: ''
          }
          this.$nextTick(() => {
            storage.removeItem('selectLocation')
            this.$router.back()
          })
          this.$store.dispatch('user/getUserAddress')
        })
      } else {
        this.$api.address.create(this.editForm).then(() => {
          this.submitFlg = true
          this.editForm = {
            name: '',
            phone: '',
            location: {},
            address: ''
          }
          this.$store.dispatch('user/getUserAddress')
          this.$nextTick(() => {
            storage.removeItem('selectLocation')
            this.$router.back()
          })
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.submit-btn {
  margin-top: 40px;
}
.select-location {
  @include wh(100%, 100px);
  background: transparent;
  border: 0;
  outline: none;
  line-height: 100px;
  padding: 0 20px;
  box-sizing: border-box;
}
</style>
